<template>
  <!--
* @Author: liuzehai
* @Motto: 求知若渴,虚心若愚
 * @LastEditTime: 2021-08-11 14:24:42
* @Description: 租户管理
 * @FilePath: /basic-services/src/views/tenant/tenant.vue
-->
  <div class="app-container">
      <div id="classification">
        <div class="searchHeader">
           <el-row :gutter="20">
            <el-col :span="6"><el-input v-model="listQuery.name" placeholder="请输入租户名称"></el-input></el-col>
            <el-col :span="6">
                <el-select v-model="listQuery.usable" clearable placeholder="请选择状态">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
             </el-col>
            <el-col :span="8">
              <el-button type="primary" icon="el-icon-search" @click="searchBtn">查询</el-button>
              <el-button type="primary" icon="el-icon-edit"  v-permission="{code: 'base:tenant:add'}" @click="addRole">新增</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="table">
           <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="tenantName"
                label="租户名称">
              </el-table-column>
               <el-table-column
                prop="tenantCode"
                width="150"
                label="租户编码">
              </el-table-column>
               <el-table-column label="状态" align="center" width="75">
                <template v-slot="{ row }">
                  <span>{{ row.usable == 1 ? "启用" : "禁用" }}</span>
                </template>
              </el-table-column>
               <el-table-column
                prop="tenantDesc"
                label="描述"
                width="180">
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding"
                width="200">
                <template v-slot="scope">
                  <div class="btnnuma">
                    <el-button type="primary" size="small" v-permission="{code: 'base:tenant:update'}" @click="Modify(scope.row,1)">编辑</el-button>
                     <el-button type="warning" size="small" @click="disablebtn(scope.row)">{{scope.row.usable == '1' ? '禁用':'启用'}}</el-button>
                     <!-- <el-button type="danger" size="small" @click="deleteButton(scope.row)">删除</el-button> -->
                  </div>
                </template>
          </el-table-column>
            </el-table>
             <pagination
              :total="totalElements"
              :page.sync="page.current"
              :limit.sync="page.size"
              @pagination="getList"
            />
        </div>
      </div>
       <el-dialog
      center
      :title="updateTitle"
      width="40%"
      top="10vh"
      :visible.sync="dialogCarInfoVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="22">
            <el-form-item prop="tenantName" label="租户名称">
              <el-input size="small" :maxlength="30" placeholder="请输入租户名称" v-model="ruleForm.tenantName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item prop="tenantCode" label="租户编码">
              <el-input size="small" :maxlength="30" placeholder="请输入租户编码" :disabled="disabledCode" v-model="ruleForm.tenantCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item prop="usable" label="状态">
              <el-select v-model="ruleForm.usable" clearable placeholder="请选择状态">
                <el-option label="启用" :value="1"></el-option>
                <el-option label="禁用" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item prop="tenantDesc" label="描述">
              <el-input type="textarea" :rows="3" placeholder="请输入描述" v-model="ruleForm.tenantDesc"
                :maxlength="200" :show-word-limit="true" resize="none" :autosize="{ minRows: 3, maxRows: 5 }"/>
            </el-form-item>
          </el-col>

       </el-row>
      </el-form>
       <span slot="footer" class="dialog-footer">
          <el-button @click="dialogCarInfoVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import goods from "@/api/commodity";
export default {
  name: 'classification',
  components: {
    Pagination
  },

  data () {
    return {
      systematic:'',
      listQuery: {
        name:"",
        usable:""
      },
      page: {
        current: 1,
        size: 10,
      },
       tableData: [],
        totalElements:0,
        page: {
        current: 1,
        size: 10,
        },
        updateTitle: "新增租户",
        dialogCarInfoVisible: false,
        disabledCode: false,
        form: {
          name: '',
        },
         ruleForm: {  //新增角色表单
          id:"", //主键id
          tenantName: "", // 租户名称
          tenantDesc: "", //租户描述
          tenantCode: "", //租户编码
          usable: "", //是否可用
        },
        typeRole: 0, //判断新增还是修改角色
        tenantId:'', //租户id
         rules: {
        tenantName: [
          { required: true, message: "请输租户名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
        ],
         tenantCode: [
          { required: true, message: "请输入租户编码", trigger: "blur" }
        ],
         usable: [
          { required: true, message: "请选择租户状态", trigger: "change" },
        ],
        },
    }
  },

  created(){
    this.getList()
  },
  mounted(){

  },
  methods: {
    getList() {
      const params = Object.assign(this.listQuery, this.page);
      goods.gettenantList(params).then((response) => {
        this.tableData = response.data.records;
        this.totalElements = response.data.total;
        this.page.current = response.data.current;
        this.page.size = response.data.size;
      });
    },
    //搜索
    searchBtn(){
      this.getList()
    },
     // 增加租户
    addRole() {
      this.dialogCarInfoVisible = true;
      this.disabledCode = false
      this.updateTitle = "新增租户"
      this.typeRole = 0
      this.ruleForm.tenantName = "";
      this.ruleForm.tenantDesc = "";
      this.ruleForm.tenantCode = "";
      this.ruleForm.usable = 1;
    },
    //确认增加
    onSubmit() {
      if (this.typeRole == 1) {
        //修改
        let params = {
            id: this.tenantId, //主键id
            tenantName: this.ruleForm.tenantName, // 租户名称
            tenantDesc: this.ruleForm.tenantDesc, //租户描述
            usable: this.ruleForm.usable, //是否可用
          }
        goods.updateTenant(params).then((res) => {
          if (res.status == 200) {
            this.dialogCarInfoVisible = false;
            this.getList();
            this.$notify({
              title: "提示",
              message: "修改成功",
              type: "success",
              duration: 2000,
            });
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        });
      } else {
        if(this.ruleForm.tenantCode == ""){
          this.$message({
              showClose: true,
              message: '请输入租户编码',
              type: 'error'
            });
            return
        }
        goods.addtenant(this.ruleForm).then((res) => {
          if (res.status == 200) {
            this.dialogCarInfoVisible = false;
            this.getList();
            this.$notify({
              title: "提示",
              message: "新增成功",
              type: "success",
              duration: 2000,
            });
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        });
      }
    },
    //修改
    Modify(scope,typeRole){
      this.typeRole = typeRole;
      this.dialogCarInfoVisible = true;
      this.disabledCode = true
      this.updateTitle = "修改租户"
      this.ruleForm.tenantName = scope.tenantName;
      this.ruleForm.tenantDesc = scope.tenantDesc;
      this.ruleForm.tenantCode = scope.tenantCode;
      this.ruleForm.usable = scope.usable;
      this.tenantId = scope.id
    },
     //禁用按钮
    disablebtn(scope) {
      if (scope.usable == "1") {
        this.$confirm("禁用该租户,是否继续?", "租户状态", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            goods.switchTenant(scope.id).then((res) => {
              if (res.status == 200) {
                this.$notify({
                  title: "提示：",
                  message: "禁用租户成功",
                  type: "success",
                  duration: 2000,
                });
                this.getList();
              } else {
                this.$notify({
                  title: "提示：",
                  type: "error",
                  message: res.msg,
                  duration: 3000,
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消禁用",
            });
          });
      } else {
        this.$confirm("启用该租户,是否继续?", "租户状态", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            goods.switchTenant(scope.id).then((res) => {
              if (res.status == 200) {
                this.$notify({
                  title: "提示：",
                  message: "启用用成功",
                  type: "success",
                  duration: 2000,
                });
                this.getList();
              } else {
                this.$notify({
                  title: "提示：",
                  type: "error",
                  message: res.msg,
                  duration: 3000,
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消启用",
            });
          });
      }
    },
    //删除按钮
    deleteButton(scope) {
      this.$confirm(
        "是否继续删除?",
        "删除租户",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          goods.deletetenant(scope.id).then((res) => {
            if (res.status == 200) {
              this.$notify({
                title: "提示：",
                message: "删除租户成功",
                type: "success",
                duration: 2000,
              });
              this.getList();
            } else {
              this.$notify({
                title: "提示：",
                type: "error",
                message: res.msg,
                duration: 3000,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  watch: {

  },
  computed: {

  },
}
</script>

<style lang="scss" scoped>

</style>
